<script setup>
import clsx from 'clsx';
import { generateMapByOptions } from '@/tools/data';

const emit = defineEmits({
  change: value => value,
});

const list = ref(Array.from({ length: 10 }).fill({}).map((_, i) => ({
  label: `tag${i}`,
  value: `tag${i}`,
})));
const current = ref(list.value[0].value);
const select = reactive(generateMapByOptions(list.value));

function onCheck(value) {
  for (const key of Object.keys(select))
    select[key] = false;

  select[value] = true;
  current.value = value;
}

watchEffect(() => {
  emit('change', current.value);
});
</script>

<template>
  <view class="overflow-auto tag-list">
    <view class="flex">
      <view
        v-for="item in list"
        :key="item.value"
        :class="clsx('p1 h-10 bg-white flex justify-center items-center tag-item',
                     { selected: !!select[item.value] })"
        @click="() => onCheck(item.value)"
      >
        {{ item.label }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.tag-list {
  .tag-item {
    border-radius: 100rpx;
    flex: 0 0 144rpx;
    margin-right: 20rpx;
  }
  .selected {
    background-color: rgba(2, 44, 67, 1);
    color: #fff;
  }
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent
}
</style>
